<template>
    <div id="app">
        <a-config-provider :locale="locale">
            <login v-if="isLoginPage"></login>
            <basic-layout v-else></basic-layout>
        </a-config-provider>
    </div>
</template>

<script>
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import enUS from 'ant-design-vue/es/locale/en_US';
import BasicLayout from "@/layouts/BasicLayout";
import Login from '@/views/user/Login';
import {AppDeviceEnquire} from '@/util/mixin'

export default {
    mixins: [AppDeviceEnquire],
    components: {
        Login, BasicLayout
    },
    computed: {
        isLoginPage: function () {
            return this.$route.path == '/' && !window.localStorage.getItem('access_token');
        },
        locale: function () {
            if (this.$store.state.currentLocale === 'en') {
                return enUS
            }
            return zhCN
        }
    },
    methods: {
        // 监听localStorage中userIdMes变化，刷新当前打开的所有页面
        watchStorageChange() {
            window.addEventListener('storage', (e) => {
                if (e.key === 'userIdMes') {
                    this.$router.go(0)
                }
            })
        },
        // 全局配置message
        messageConfig() {
            this.$message.config({
                top: `45vh`,
            });
        }
    },
    created() {
        let primaryColor = window.localStorage.getItem('primaryColor');
        if (primaryColor) {
            window.less.modifyVars({
                '@primary-color': primaryColor
            });
        }
    },
    mounted() {
        this.watchStorageChange()
        this.messageConfig()
    }
}
</script>


<style lang="less">
#app {
    height: 100vh;
}

.ant-table-thead {
    background-color: white;
}

.ant-table-tbody td {
    height: 40px;
}

th.table_title{
  background-color: #F7F7FB !important;
}
.ant-table-header{
  padding-bottom: 1px !important;
}

</style>
